<!DOCTYPE html>
{% load staticfiles %}

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/list_custom.css' %}"  media="screen" title="no title" charset="utf-8">
        <style type="text/css">
            body {
                background: url({% static 'images/super_blur_back2.jpg' %});
                background-size: cover;
            }

            .ui.grid.divided.segment.container{
                min-height: 400px;
                width:600px !important;
                border:rgba(255, 0, 0, 0);
                position: absolute;
                left: 50%;
                top:40%;
                transform: translate(-50%,-50%);
            }

            .five.wide.column {
                background: url({% static 'images/red_regi.jpg'  %});
                background-size: cover;
                background-position: 60% 0%;
            }

            form {
                margin-top: 60px;
            }
            h1,h3,h4{
                font-family: 'Play', sans-serif !important;

            }
        </style>

    </head>
    <body>
        <div class="ui grid divided segment container">
            <div class="five wide  column">

                <h4 class="ui inverted header">

                    <i class="angle left  icon"></i>
                </h4>

                <h1 class="ui inverted center aligned header" style="font-size: 40px;margin-top:55px">
                    <p class="sub header">
                        Welcome to
                    </p>
                    10MINs
                </h1>

            </div>

            <div class="eleven wide column">
                <h4 class="ui inverted right aligned header">
                    <a href="{% url 'register' %}" style="color:#ff695e;">or Register</a>
                </h4>

                <form class="ui form error" method="post">
                    {% csrf_token %}
                    {% if form.errors %}
                        <div class="ui error message">
                            {{ form.errors }}
                        </div>

                        {% for field in form  %}
                            <div class="{{ field.errors|yesno:'error, ' }} field">
                                {{ field.label }}
                                {{ field }}
                            </div>
                        {% endfor %}

                    {% else %}
                        {% for field in form  %}
                            <div class="field">
                                {{ field.label }}
                                {{ field }}
                            </div>
                        {% endfor %}

                    {% endif %}

                    <button class="ui inverted red circular right floated button" type="submit">Done</button>
                </form>
            </div>
        </div>
    </body>
</html>
